<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="80%" :showOkBtn="false">
    <div>订单标识号:{{dataList.biaoShiHao}}</div>
    <div>来料信息:</div>
    <vxe-grid ref="tableRef" v-bind="gridOptions" :style="{height: (300)+'px'}">
      <template #toolbar_buttons>

      </template>
      <template #unDo_slot="{ row }">
        <vxe-text  :content="row.unDo" :status="getQueLiaoValue(row).status"></vxe-text>
      </template>
    </vxe-grid>
    <div>物料导入信息:</div>
    <vxe-grid ref="tableRef2" v-bind="gridOptions2" :style="{height: (200)+'px'}">
      <template #toolbar_buttons>

      </template>

    </vxe-grid>
<!--    :style="{height: (300)+'px'}"-->
    <div> bom清单(第3级):</div>
    <vxe-grid ref="tableRef3" v-bind="gridOptions3"  :style="{height: (200)+'px'}">
      <template #toolbar_buttons>

      </template>

    </vxe-grid>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicForm, useForm, ApiSelect } from '@/components/Form';
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import util from "@/utils/util";

import { useModal } from "@/components/Modal";
import { pmcOemItems,oemMaterialRefList,orderBomList} from '@/api/heng/stock';
import { useMessage } from "@/hooks/web/useMessage";
import { useUserStore } from "@/store/modules/user";
import {BasicTableProps} from "@/components/VxeTable";
import { itemColumns,itemColumns2,itemColumns3 } from './role.data';

const userStore = useUserStore();

const [registerModal, { openModal }] = useModal();

const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const dataList = ref({});
const { createMessage } = useMessage();
const contentHeight = ref(window.innerHeight);

const id = ref("");



const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  //打开弹层后的回调
  setDrawerProps({ confirmLoading: false });
  // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
  // if (unref(treeData).length === 0) {
  //   treeData.value = (await getMenuList()) as any as TreeItem[];
  // }
  isUpdate.value = !!data?.isUpdate;
  id.value = "";
  dataList.value=data;
  pmcOemItemsFn();
  oemMaterialRefListFn();
  orderBomListFn();
});

const gridOptions = reactive<BasicTableProps>({
  // keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  columns: itemColumns,
  filterConfig: {
    remote: true,
  },
  expandConfig: {
    padding: true
  },
  showFooter: true,

  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
    refresh: true,
  },
  formConfig: {
    enabled: false,
  },
  pagerConfig: {
    // pageSize: 20,
  },
  proxyConfig: {
    enabled: false,
  },
});

const tableRef = ref();

const gridOptions2 = reactive<BasicTableProps>({
  // keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  columns: itemColumns2,
  // filterConfig: {
  //   remote: true,
  // },
  expandConfig: {
    padding: true
  },
  showFooter: true,

  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
    refresh: true,
  },
  formConfig: {
    enabled: false,
  },
  pagerConfig: {
    // pageSize: 20,
  },
  proxyConfig: {
    enabled: false,
  },
});

const buMenName=ref("合金壳");

const tableRef2 = ref();

const gridOptions3 = reactive<BasicTableProps>({
  // keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  columns: itemColumns3,
  // filterConfig: {
  //   remote: true,
  // },
  expandConfig: {
    padding: true
  },
  showFooter: true,

  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
    refresh: true,
  },
  formConfig: {
    enabled: false,
  },
  pagerConfig: {
    // pageSize: 20,
  },
  proxyConfig: {
    enabled: false,
  },
});

const tableRef3 = ref();

const getTitle = computed(() => (!unref(isUpdate) ? '物料明细' : '物料明细'));


function pmcOemItemsFn(){
  pmcOemItems({biaoShiHao: dataList.value.biaoShiHao,buMenName:buMenName.value}).then((res) => {
    if (res.code==200) {
      tableRef.value.loadData(res.data);//res.data
    }else{
      createMessage.error(res.message);
    }
  })
}

function oemMaterialRefListFn(){
  oemMaterialRefList({
    // pno: dataList.value.mttid,
    buMenName:buMenName.value}).then((res) => {
    if (res.code==200) {
      tableRef2.value.loadData(res.data);//res.data
    }else{
      createMessage.error(res.message);
    }
  })
}

function orderBomListFn(){
  orderBomList({biaoShiHao: dataList.value.biaoShiHao,buMenName:buMenName.value}).then((res) => {
    if (res.code==200) {
      tableRef3.value.loadData(res.data);//res.data
    }else{
      createMessage.error(res.message);
    }
  })
}

function getQueLiaoValue(row){
  let text="",status="";
  if(row.unDo>0){
    text="缺料";
    status="error";
  }else{
    text="齐套";
    status="success";
  }
  return {text,status};


}



</script>
